<template>
    <div>
        <div class="other">
            <ul>
                <li class="backTodo">
                    <router-link to="/Index">返回Todo</router-link>
                </li>
                <li class="exit">
                    <router-link to="/Login">退出登录</router-link>
                </li>
            </ul>
        </div>
        <div class="same">Now : {{nowTime}}</div>
        <div class="same">{{year}} 年已经过去 {{yearDay}} 天</div>
        <div class="same">{{month}} 月已经过去 {{monthDay}} 天</div>
        <div class="same">这周剩下 {{week}} 天</div>
        <div class="same">今天剩下 {{hours}} 小时 {{minutes}} 分 {{seconds}} 秒</div>
    </div>
</template>

<script>
export default {
    name:'BackTime',
    data() {
        return {
            now:0,
            year:'0',
            yearDay:'0',
            month:'0',
            monthDay:'0',
            week:'0',
            hours:'00',
            minutes:'00',
            seconds:'00'
        }
    },
    // computed:{
    //     nowTime(){
    //             var nowTime = new Date()
    //             // var year = nowTime.getFullYear();
    //             // var month = nowTime.getMonth() + 1;
    //             // var date = nowTime.getDate();
    //             // var hours = nowTime.getHours();
    //             // var minutes = nowTime.getMinutes();
    //             // var seconds = nowTime.getSeconds();
    //             // var now = year + "/" + month + "/" + date + " " + hours + ":" + minutes + ":" + seconds;
	// 			return nowTime;
    //     }
    // },
    props: {
    time: {
      type: [Number, String],
      default: 0
    },
    isMilliSecond: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    duration() {
      const time = this.isMiniSecond ? Math.round(+this.time / 1000) : Math.round(+this.time);
      console.log(time);
      return time;
    }
  },

    mounted() {
        this.time(this.nowTime);
    },
    methods: {
        time(nowTime){
            var nowTime = new Date()
            this.year = nowTime.getFullYear();
            this.timer = setTimeout(() => {
                this.time(nowTime - 1)
            }, 1000);
        }
    },
}
</script>

<style scoped>
    body {
        background-color: #93afca;
    }
    
    .same {
        width: 400px;
        height: 60px;
        background-color: rgb(140, 199, 170);
        margin: auto;
        margin-top: 50px;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        line-height: 60px;
    }
    .other {
        position: absolute;
        top: -10px;
        right: 20px;
        width: 350px;
        height: 60px;
    }
    ul{
        margin-top: 20px;
    }
    li{
        height: 41px;
    }
    .backTodo {
        width: 150px;
        height: 60px;
        display: inline;
        border: 0;
        color: #fff;
        margin-right: 20px;
    }
    
    .exit {
        width: 150px;
        height: 60px;
        display: inline;
        border: 0;
    }
    
    a {
        text-decoration: none;
        color: #fff;
        font-size: 20px;
    }
</style>